<template>
	<div>
		<el-form-item label-width="0">
			<el-divider class="custom-divider">{{ $t('designer.setting.columnSetting') }}</el-divider>
		</el-form-item>
		<el-form-item :label="$t('designer.setting.gutter')">
			<el-input-number v-model="thisOptionModel.gutter" style="width: 100%"></el-input-number>
		</el-form-item>
		<el-form-item :label="$t('designer.setting.colsOfGrid')"></el-form-item>
		<el-form-item label-width="0">
			<li v-for="(colItem, colIdx) in thisSelectedWidget.cols" :key="colIdx" class="col-item">
				<span class="col-span-title">{{ $t('designer.setting.colSpanTitle') }}{{ colIdx + 1 }}</span>
				<el-input-number v-model.number="colItem.options.span" :min="1" :max="24"
								 @change="(newValue, oldValue) => spanChanged(thisSelectedWidget, colItem, colIdx, newValue, oldValue)"
								 class="cell-span-input"></el-input-number>
				<el-button circle plain size="small" type="danger" @click="deleteCol(thisSelectedWidget, colIdx)"
						   icon="el-icon-minus" class="col-delete-button"></el-button>
			</li>
			<div>
				<el-button type="text" @click="addNewCol(thisSelectedWidget)">{{ $t('designer.setting.addColumn') }}</el-button>
			</div>
		</el-form-item>
	</div>
</template>

<script>

export default {
	name: "gutter-editor",
	mixins: [],
	props: {
		designer: Object,
		selectedWidget: Object,
		optionModel: Object,
	},
	data() {
		return {
			thisOptionModel: this.optionModel,
			thisSelectedWidget: this.selectedWidget,
			cssClassList: [],
		}
	},
	watch: {
		'optionModel': {
			handler(val) {
				if (val) {
					this.thisOptionModel = val
				}
			}
		},
		'selectedWidget': {
			handler(val) {
				if (val) {
					this.thisSelectedWidget = val
				}
			}
		}
	},
	methods: {
		spanChanged(curGrid) {
			let spanSum = 0
			curGrid.cols.forEach((colItem) => {
				spanSum += colItem.options.span
			})
			if (spanSum > 24) {
				//this.$message.info('列栅格之和超出24')
				console.log('列栅格之和超出24')
				//TODO: 语言字符串资源化
			}

			this.designer.saveCurrentHistoryStep()
		},

		deleteCol(curGrid, colIdx) {
			this.designer.deleteColOfGrid(curGrid, colIdx)
			this.designer.emitHistoryChange()
		},

		addNewCol(curGrid) {
			this.designer.addNewColOfGrid(curGrid)
			this.designer.emitHistoryChange()
		},

	}
}
</script>

<style lang="scss" scoped>
li.col-item {
	list-style: none;

	span.col-span-title {
		display: inline-block;
		font-size: 13px;
		width: 120px;
	}

	.col-delete-button {
		margin-left: 6px;
	}
}

</style>
